<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>发表文章</title>
	<link rel="stylesheet" href="layui/css/layui.css">
	<link rel="stylesheet" href="js/tinymce/plugins/prism/prism.css">

	<script src="layui/layui.js"></script>
	<script src="js/vue.min.js"></script>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/tinymce/tinymce.min.js"></script>
	<script src="js/tinymce/plugins/prism/prism.js"></script>

	<style>

	</style>
</head>

<body>
	<div id="app">
		<h1 style="text-align: center;">发布文章</h1>

		<form method="post" id="articeForm">
			<div class="layui-form-item">
				<label class="layui-form-label">标题</label>
				<div class="layui-input-block">
					<input type="text" id="title" name="title" autocomplete="off" class="layui-input" placeholder="输入文章标题"
						value="好好学习，天天向上" />
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">正文</label>
				<div class="layui-input-block">
					<textarea id="mytextarea" name="content"></textarea>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label"></label>
				<input type="button" id="addBtn" class="layui-btn layui-btn-normal" value="发表" @click="faBiaoHandler">
			</div>
		</form>
	</div>


</body>

<script src="js/tinymce.js"></script>

<script>


	let vm = new Vue({
		el: '#app',
		data: {

		},
		methods: {
			faBiaoHandler() {

				// 如果文本域有初始内容，则使用以下代码解决
				// $('#mytextarea').html(tinyMCE.editors['mytextarea'].getContent());
				// $('#mytextarea').html(tinymce.get('mytextarea').getContent());

				console.log(tinyMCE.editors['mytextarea'].getContent());

				$.ajax({
					url: 'http://localhost:9999/layui/api/article/add',
					type: 'post',
					data: $("#articeForm").serialize(),
					// setup: function (editor) {
					// 	console.log("setup", editor);
					// 	editor.on('change', function () { editor.save(); });
					// },
					beforeSend: function (xhr) {
						let token = localStorage.getItem("token");
						// 使用请求头的方式传递
						xhr.setRequestHeader("Authorization", "Bearer " + token)
					},
					success: function (res) {
						console.log(res);
						if (res.code == 401) {
							location.href = "index.html";
							return;
						}

						if (res.code == 200) {

						}
					}
				});
			}
		}
	});



</script>

</html>